<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
	<title>湖南省自来水公司营销管理信息系统</title> 
	
	<link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title" />	
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title" />	
	
	<link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />
	
	<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
	<script src="../js/jquery/jquery-3.3.1.js"></script>
	<script src="/webjars/vue/2.5.17/dist/vue.js"></script>
	<script src="../layui/layui.all.js" type="text/javascript" ></script>
	<style type="text/css">
	input.enter { 
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		border-radius: 0px;
		border:1px solid #000; margin:0px; padding:0px; background:none;
		width:98%;
		height:100%;
		text-align:right;
	 }
	 table.data tbody td.enter {
	 	padding:0px;
		margin:0px;
		width:100px; vertical-align:middle;
	 }
	 .right a{color:#000;}
	 .state0 {color:#999;}     /*待抄*/
	 .state1 {color:#000;}     /*已抄未复核*/
	 .state2 {color:#0000FF;}  /*已复核*/
	</style>
	<script type="text/javascript">
		Date.prototype.Format = function (fmt) {
			var o = {
				"M+": this.getMonth() + 1, //月份
				"d+": this.getDate(), //日
				"H+": this.getHours(), //小时
				"m+": this.getMinutes(), //分
				"s+": this.getSeconds(), //秒
				"q+": Math.floor((this.getMonth() + 3) / 3), //季度
				"S": this.getMilliseconds() //毫秒
			};
			if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		}
		$(function(){
			showtime();
		});

		function showtime(){
			var date=new Date();
			str= date.Format("yyyy年MM月");
			$("#t1").val(str);
			//延迟执行一次
			window.setTimeout("showtime()",1000);
		}


	</script>

	<script type="text/javascript">
	
	//修改最大表码值
	function setMaxValue(id){
		showWindow({url:'../page/rd_enter_setMaxValue.html',width:560,height:340});
	}
	
	//修改上月底码 
	function setPreValue(id){
		showWindow({url:'../page/rd_enter_setPreValue.html',width:560,height:540});
	}
	</script>
</head> 
 
<body> 

<div id="wrapper">

	<div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>


	<div id="content" class="xgrid">

		<div class="x12">
			
			<h2>
				抄表录入 - <span id="t1"></span> - <span id="sp">{{volumeOne.volumeName}}</span>（共{{count}}户）
				<div style="float:right;">
					选择表册 
					<select class="medium" id="sel" onchange="changesel(this.value)">
						<optgroup :label="a.AreaName" v-for="a in area">
							<option v-for="v in volume" :value="v.ID" v-if="a.sid==v.sid">{{v.VolumeName}}</option>
						</optgroup>
					</select>
				</div>
			</h2>
				
			<table class="data display">
					<thead>
						<tr>
							<th>用户编码</th>
							<th>表身码</th>
							<th>最大表码值</th>
							<th width="100">用户姓名</th>
							<th>上月表码数</th>
							<th>本月表码数</th>
							<th>实际用水量</th>
							<th width="200">状态</th>
						</tr>
					</thead>
					<tbody>
						<tr class="odd gradeX" v-for="(r,index) in read" v-if="count!=0">
							<td v-text="r.UserNo">加载中...</td>
							<td v-text="r.MeterNo">加载中...</td>
							<td class="right"><a href="#" @click="show1(r.UserNo,r.MeterNo,r.MaxValue,r.UserName,r.ID)" v-text="r.MaxValue"></a></td>
							<td v-text="r.UserName">加载中...</td>
							<td class="right"><a href="#" @click="show2(r.UserNo,r.MeterNo,r.UserName,r.ID,r.PreValue)" v-text="r.PreValue"></a></td>
							<td class="enter"><input id="'prebefore'+index+''"  class="enter"  :value="r.PreValue"
													 @input="checkinput($event,r.MaxValue,r.PreValue,r.Enter)"
													 @blur="updateread($event,r.MaxValue,r.PreValue,r.UserNo,r.ID)"
													 v-if="r.Audit!=1&&r.Enter!=true">
								<input class="enter" :value="r.PreValue"  v-if="r.Audit==1&&r.Enter!=true" readonly="readonly">
								<input class="enter" :value="r.CurValue"  v-if="r.Audit==1&&r.Enter==true" readonly="readonly">
								<input :id="'preafter'+index+''" class="enter"  :value="r.CurValue"
									   @change="checkinput($event,r.MaxValue,r.PreValue,r.Enter,r.CurValue)"
									   @blur="updateread($event,r.MaxValue,r.PreValue,r.UserNo,r.ID,r.CurValue)"
									   v-if="r.Audit!=1&&r.Enter==true">
							</td>
							<td class="right"><span id="amount">{{r.Amount}}</span></td>
							<td><a href="#"  class="state1" v-if="r.Audit==null">待抄</a>
								<a  @click="setNotEnter(r.ID);" class="state1" v-if="r.Audit==0">已抄，未复核</a>
								<a  class="state1" v-if="r.Audit==1">已复核</a>
								<span id="dial" style="color:red;" v-if="r.Dial==true">(不合理的水表转盘)</span>
							</td>
						</tr>
						<tr v-if="count==0">
							<td colspan="8" align="center">没有数据</td>
						</tr>
						</tbody>
					</table>
			
		</div> <!-- .x12 -->
	</div> <!-- #content -->
	<script>

	</script>

	<script>
		var content=new Vue({
			el: "#content",
			data: {
				area: "",
				volume: "",
				vid:"",
				volumeOne:"",
				count:"",
				read:"",
				bool:false,
				readuserno: {

				},
				upMax:"",
			},
			methods:{
				checkinput(event,maxvalue,prevalue,enter,curvalue){
					var val=event.target.value;
					var id=event.target.id;
					var reg = /^\d*$/;
					if(!reg.test(val)){
						//console.log("该文本框只能输入数字！");
						if(!enter) {
							$("#"+id).val(prevalue);
							//$("#amount").html(0);
							content.bool = false;
							return false;
						}else{
							$("#"+id).val(curvalue);
							//$("#amount").html(0);
							content.bool = false;
							return false;
						}
					}
					if(val>maxvalue){
						if(!enter) {
							$("#"+id).val(prevalue);
							content.bool = false;
							return false;
						}else{
							$("#"+id).val(curvalue);
							content.bool = false;
							return false;
						}
					}
					content.bool=true;
				},


				updateread(event,maxvalue,prevalue,userno,id,curval){
					console.log(event.target.id);
					if(prevalue==undefined){
						prevalue=0;
					}
					var val=event.target.value;
					content.readuserno.Id=id;
					content.readuserno.userNo=userno;
					content.readuserno.enter=true;
					content.readuserno.curValue=val;
					content.readuserno.audit=0;
					content.readuserno.volumeId=content.volumeOne.id;
					console.log("bool "+content.bool);
					//最大表码值-上月表码数+本月表码数
					if(content.bool){
						console.log(content.bool+"进入了");
						var waternum=0;
						if(val-prevalue<0){
							waternum=maxvalue-prevalue-0+(val-0);
						}else{
							waternum=val-prevalue;
						}
						content.readuserno.amount=waternum;
						//$("#amount").html(waternum);
						var dial=maxvalue*0.2;
						if(dial<val){
							content.readuserno.dial=true;
						//	$("#dial").html("(不合理的水表转盘)");
						}else {
							content.readuserno.dial = false;
						}
						$.ajax({
							type: "POST",
							url: "/rd-read/updateread",
							data:content.readuserno,
							dataType: "json",
							success: function(json) {
								content.read=json;
							}
						});
						content.bool=false;
					}else{
						if(curval!=null){
							$("#"+event.target.id).val(curval);
						}else{
						$("#"+event.target.id).val(prevalue);
						}
					}
					},

				getReadafterupdate() {
					$.getJSON("/rd-read/queryvolumeNameAndCountAndRead", {"volumeID": content.volumeOne.id}, function (json) {
						content.$nextTick(() => {
							content.read = json.data.map.list;
						})
					})

				},

				setNotEnter(id){
					showDialog('确认将此条['+id+']更改为待抄状态吗？',function(){
						$.ajax({
							type: "PUT",
							url: "/rd-read/updateAudit",
							data:"Id="+id+"&&volumeId="+content.volumeOne.id,
							dataType: "json",
							success: function(json) {
								content.read=json;
							}
						});
					});
				},
			//修改最大表码数
				 show1(userno,meterno,maxval,username,id){
			var value=1;
			var w = ($(window).width() * 0.7);
			var h = ($(window).height() - 50);
			var str="";
			layer.open({
				resize: false,
				title: '预览',
				shadeClose: true,
				area: [w + 'px', h + 'px'],
				type: 2,
				content: 'rd_enter_setMaxValue.html?userno='+userno+'&&meterno='+meterno+'&&maxval='+maxval+'&&username='+username+'&&id='+id,
				btn: ['关闭'],
				// yes: function (index, obj) {
				// 	///当点击‘确定’按钮的时候，获取弹出层返回的值
				// 	var res = window["layui-layer-iframe" + index].show();
				// 	//打印返回的值，看是否有我们想返回的值。
				// 	alert(res);
				// 	//     console.log(res);
				// 	//最后关闭弹出层
				// 	layer.close(index);
				// },
				success: function (layero, index) {
					var body = layer.getChildFrame('body', index);
					str = body.find('button').html();
				}
			});
		},
			//修改上月底吗r.UserNo,r.MeterNo,r.UserName,r.ID,r.PreValue
				show2(userno,meterno,username,id,pervalue){
					var empname=ming.Syemp.empNmae;
					var value=1;
					var w = ($(window).width() * 0.7);
					var h = ($(window).height() - 20);
					var str="";
					layer.open({
						resize: false,
						title: '预览',
						shadeClose: true,
						area: [w + 'px', h + 'px'],
						type: 2,
						content: 'rd_enter_setPreValue.html?userno='+userno+'&&meterno='+meterno+'&&pervalue='+pervalue+'&&username='+username+'&&id='+id+'&&empname='+empname,
						btn: ['关闭'],
						success: function (layero, index) {
							var body = layer.getChildFrame('body', index);
							str = body.find('button').html();
						}
					});
				}
			},
			created(){
			//查询下拉框中的表册
			$.ajax({
				type: "GET",
				url: "/rd-read/queryvolume",
				dataType: "json",
				success: function (json) {
					content.volume = json;
				}
			})
			//查询下拉框中的辖区
			$.getJSON("/rd-read/queryarea", function (json) {
				content.area = json;
			});

			$(function () {
				setTimeout(function () {
					var sel = $("#sel").val();
					content.vid = sel;
					$.getJSON("/rd-read/queryvolumeNameAndCountAndRead", {"volumeID": content.vid}, function (json) {
						content.$nextTick(() => {
							content.volumeOne = json.data.map.volume1;
							content.count = json.data.map.count;
							content.read = json.data.map.list;
						})
					})
				}, 400)//延时
			});
		}
		})
	</script>
	<script>
		//改变下拉框选择的值
		function changesel(val) {
			$.getJSON("/rd-read/queryvolumeNameAndCountAndRead",{"volumeID":val},function(json){
				content.$nextTick(() => {
					content.volumeOne = json.data.map.volume1;
					content.count = json.data.map.count;
					content.read = json.data.map.list;
				})
			})
		}
	</script>
	
	<div id="footer">		
		<div class="content_pad">			
			<p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>.   技术支持 <a href="#">职业教育</a>.</p>
		</div> <!-- .content_pad -->
	</div> <!-- #footer -->
	
</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script type="text/javascript">
	
$(document).ready ( function () 
{
	Dashboard.init ();
	
	
	//抄表处理
	$('.enter').keyup(function(e){
		e=e?e:event;
		var key = e.keyCode;
		if(key==13||key==40){
			var input = $(this).parent().parent().next().find('input.enter');
			if(input.length) input.get(0).select();
		}else if(key==38){
			var input = $(this).parent().parent().prev().find('input.enter');
			if(input.length) input.get(0).select();
		}
	});
	
});

</script>

</body> 
 
</html>